<template>
  <div>
    <div class="title">轮播图展示:</div>
    <el-form @submit.native.prevent="save" label-width="100px">
      <el-form-item class="d-f d-f-ai" style="margin:15px 100px;">
        <el-button type="primary" @click="addin">点击添加</el-button>
      </el-form-item>
      <el-form-item>
        <!-- <el-button style="margin:15px 100px;" @click="priceByPowerConfig.push({})" type="primary" v-if="!(priceByPowerConfig.length >= 6)">添加</el-button> -->
        <el-row>
          <el-col :span="8" v-for="(items,i) in priceByPowerConfig" :key="i">
            <el-form-item label="跳转链接:" style="margin-bottom:5px" class="d-f d-f-ai d-f-jc" >
              <p>{{items.url}}</p>
              <!-- <el-select v-model="items.url" disabled placeholder="请选择跳转链接">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
              </el-select>-->
            </el-form-item>
            <el-form-item label="图片">
              <img class="avatar-uploader" :src="items.path" alt />
            </el-form-item>
            <el-form-item style="margin:15px 100px;" class="d-f d-f-ai">
              <el-button type="danger" @click="removeimg(i)">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="upload"></div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import upload from "@/utils/upload";
@Component({})
export default class extends mixins(upload) {
  public token = {
    token: ''
  };
  public imageUrl = "";
  public priceByPowerConfig = [
        {
            id:'1',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        },
        {
            id:'2',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        },
        {
            id:'3',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        },
        {
            id:'4',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        },
        {
            id:'5',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        },
        {
            id:'6',
            url:'赣江一品',
            path:'http://shop.gzyxxy.com/static/2020-06-08-10-35-47-5edda4035bae7.jpg'
        }
  ];

  private removeimg(i: number) {
    //删除照片事件
    this.$confirm(`是否删除这张这照片？`, "确认信息", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确认删除",
      cancelButtonText: "放弃删除"
    })
      .then(() => {
        const model = {
          id: this.priceByPowerConfig[i].id
        };
        this.$message.success("删除成功");
      })
      .catch(() => {
        this.$message.success("取消成功");
      });
  }

  private addin() {
    //上传图片
    this.$router.push("/swiperedit");
  }

  private swiperlist() {
    //获取轮播图列表（页面初始化）
    // getswiper().then(res=>{
    //     if(res.data.code == -2){
    //         this.$message.error('token过期请重新登陆')
    //         return this.$router.push('/')
    //     }
    //     this.priceByPowerConfig = res.data.data
    // }).catch(err=>{
    //     console.log(err)
    // })
  }

  created() {
    this.swiperlist();
  }
}
</script>

<style lang="scss" scoped>
.title{
    margin-top: 30px;
    margin-left: 120px;
}
.d-f {
  display: flex;
}
.d-f-ai {
  align-items: center;
}
.avatar-uploader {
  display: block;
  width: 178px;
  height: 178px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  font-size: 15px;
  font-weight: bold;
}
</style>